<template>
	<view class="page" :style="`backgroundImage:url(${bannerbUrl}`">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="banner">
			<image src="/static/banner.png" v-show="!bannerbUrl"></image>
			<image v-show="bannerbUrl"></image>
		</view>
		
		<view class="con">
			<view class="opt">
				<input type="tel" v-model.trim="phoneNumber" placeholder="Your phone number" />
			</view>
			
			<view class="opt">
				<input type="text" v-model.trim="smsCode" maxlength="6" placeholder="SMS code" />
				<view class="code" :class="{'con-a': n != 120}" v-text="smsCodetext" @click="getSmsCode"></view>
			</view>
			<view class="agree-con" :class="{'con-p': checked}" @click="tapAgree">I have read and agree<text class="agree" @click.stop="tapPri">Privacy Policy</text></view>
			<view class="sub" @click="sub">Login</view>
			<view class="not-login" @click="isService = true">I can't login</view>
			<text class="contact">
				Company Name:{{contactInfo.cn}}<br />
				Company Registration No:{{contactInfo.crn}}<br />
				Certificate of Authority No:{{contactInfo.cmn}}
			</text>
		</view>
		<service v-show="isService" ref="service" @close='isService = false'></service>
	</view>
</template>

<script>
	import service from "@/components/service";
	import {getImgCode,login,autoLogin,getXym} from "@/api/common.js"
	export default {
		data() {
			return {
				phoneNumber: '',
				smsCode: '',
				n: 120,
				smsCodetext: 'Get code',
				imgSrc: '',
				checked: false,
				registerSource: "",
				deviceId: '',
				system: "",
				phoneBrand: "",
				userAgent:"",
				isService:false,
				showPrivacy: false,
				canLogin: false,
				registerChannel: 'APP',
				bannerbUrl:'',
				contactInfo:{}
			}
		},
		metaInfo: {
			title: 'CM'
		},
		
		components: {
			service,
		},
		
		onLoad() {
			uni.removeStorageSync("source");
			const webUrl = uni.getStorageSync('webUrl') || this.COFIG?.staticUrl; //默认先取缓存中存储的上次可以访问的域名
			const lastStr = webUrl.slice(-1);//判断域名是否带斜杠/
			const privacyPage = lastStr == "/" ? "banner.jpg" : "/banner.jpg"
			this.bannerbUrl = webUrl + privacyPage
			let cToken = uni.getStorageSync("cToken");
			let systemInfo = uni.getSystemInfoSync();
			this.system = systemInfo.system;
			this.registerSource = systemInfo.deviceType;
			this.phoneBrand = systemInfo.deviceBrand || systemInfo.deviceModel;
			this.userAgent = systemInfo.ua
			if (cToken) {
				this.autoLogin()
			}
			this.getContactInfo()
		},
		
		methods: {
			//获取验证码
			getSmsCode() {
				var self = this;
				var regNumber = /\d+/;
				if (!self.phoneNumber) {
					self.UTILS.logStr('Please enter your phone number');
					return;
				}
				if (regNumber.test(self.smsCodetext)) {
					return
				}
				var time = setInterval(function() {
					self.n--;
					self.smsCodetext = self.n + 's';
					if (self.n == 0) {
						self.n = 120;
						clearInterval(time);
						self.smsCodetext = 'Get code';
					}
				}, 1000);
				const params = {
					phoneNumber: self.phoneNumber
				}
				getImgCode(params).then(res => {
					self.UTILS.logStr(res.message);
					if (res.code != '0000') {
						self.n = 120;
						clearInterval(time);
						self.smsCodetext = 'Get code';
					}
				})
			},

			// 登录注册
			sub() {
				var self = this;
				if (!self.phoneNumber) {
					self.UTILS.logStr('Please enter your phone number');
					return;
				}
				if (!self.smsCode) {
					self.UTILS.logStr('Please enter SMS code');
					return;
				}
				if (!self.checked) {
					self.UTILS.logStr('Please read and tick the Privacy Policy.');
					return;
				}
				self.login();
			},

			//登录
			login() {
				var self = this;
				uni.removeStorageSync("cToken");
				const params = {
					phoneNumber: self.phoneNumber,
					vcode: self.smsCode,
					registerChannel: self.registerChannel,
					registerSource: self.registerSource,
					system: self.system,
					phoneBrand: self.phoneBrand,
					userAgent:self.userAgent,
					deviceId: uni.getStorageSync("deviceId")
				}
				login(params).then(res => {
					if (res.code == '0000') {
						uni.setStorageSync('cToken', res.data);
						uni.removeStorageSync('canLogin')
						uni.reLaunch({
							url:'/pages/home/index',
							animationType: 'pop-in',
							animationDuration: 200
						})
					} else {
						self.UTILS.logStr(res.message);
					}
				})
			},

			// 自动登录
			autoLogin() {
				var self = this;
				const params = {
					deviceId: uni.getStorageSync("deviceId")
				}
				autoLogin(params).then(res => {
					if (res.code == '0000') {
						if(res.data){
							uni.setStorageSync('cToken', res.data)
							uni.removeStorageSync('canLogin')
							uni.reLaunch({
								url:'/pages/home/index',
								animationType: 'pop-in',
								animationDuration: 200
							})
						}
						else{
							uni.removeStorageSync('cToken')
						}
					} else {
						uni.removeStorageSync('cToken')
						self.UTILS.logStr(res.message);
					}
				})
			},
			
			//获取联系方式
			getContactInfo() {
				const webUrl = uni.getStorageSync('webUrl') || this.COFIG?.staticUrl;
				const params = {
					ym: webUrl,
					deviceId: uni.getStorageSync("deviceId")
				}
				getXym(params).then(res => {
					if (res.code == '0000') {
						console.log(res,"resresres")
						this.contactInfo = res.data
					}
				})
			},

			//app点击阅读协议
			tapAgree(){
				var self = this;
				const canLogin = uni.getStorageSync("canLogin");
				if(canLogin == "can"){
					self.checked = !self.checked;
				}else{
					self.tapPri();
				}
			},

			//点击协议
			tapPri(){
				uni.navigateTo({
					url:'/pages/privacy/index',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100%;
		height: 100vh;
		background-color: #FFF;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.banner{
			position: relative;
			image {
				width: 100%;
				height: 270rpx;
				display: block;
			}
		}
		.con {
			padding-top: 40rpx;
			margin: 2.4rem 50rpx 0 50rpx;
			.opt {
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				height: 100rpx;
				background-color: #F6F6F6;
				border-radius: 50rpx;
				margin-top: 40rpx;
				input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					color: #040507;
					border: none;
					background: none;
				}
				image {
					width: 1.4rem;
					height: 0.7rem;
					border-radius: 0.08rem;
					float: right;
					margin: 0.15rem 0.4rem 0 0;
				}
				.code {
					width: 140rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFF;
					background-color: #4c2db8;
					border-radius: 8rpx;
				}
				.con-a {
					background-color: #6F6F6F;
				}
			}
			
			.agree-con {
				height: 88rpx;
				line-height: 88rpx;
				padding-left: 58rpx;
				font-size: 28rpx;
				color: #000;
				background: url("../../static/check.png") no-repeat left center;
				background-size: 35rpx 35rpx;
				.agree{
					cursor: pointer;
					color: #168de4;
					margin-left: 16rpx;
				}
			}
			.con-p {
				background: url("../../static/checked.png") no-repeat left center;
				background-size: 35rpx 35rpx;
			}
			
			.sub {
				height: 100rpx;
				line-height:100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFF;
				background-color: #4c2db8;
				border-radius: 50rpx;
				display: block;
				margin: 50rpx 0 0 0;
			}
			.not-login{
				text-align: center;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
			
			.contact {
				line-height: 38rpx;
				text-align: center;
				font-size: 28rpx;
				color: #6F6F6F;
				display: block;
				margin: 168rpx auto 30rpx auto;
			}
		}
	}
</style>
